<template>
  <div>
    <div class="order-statistics">
      <div class="data-box">
        <img src="../images/文件.png" alt="">
        <div class="small-box">
          <p>总订单</p>
          <p>5486</p>
        </div>
      </div>
      <div class="data-box">
        <img src="../images/符号十二.png" alt="">
        <div class="small-box">
          <p>总销售额</p>
          <p>202466</p>
        </div>
      </div>
      <div class="data-box">
        <img src="../images/文件 (1).png" alt="">
        <div class="small-box">
          <p>今日订单数</p>
          <p>198</p>
        </div>
      </div>
      <div class="data-box">
        <img src="../images/符号十二 (1).png" alt="">
        <div class="small-box">
          <p>今日销售额</p>
          <p>2189</p>
        </div>
      </div>
    </div>
    <div class="statistics-chart">
      <h3 class="chart-title">数据统计</h3>
      <div ref="chartRef" class="chart-container"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let chart = null

// 模拟数据
const chartData = {
  dates: ['2023/05/17', '2023/05/18', '2023/05/19', '2023/05/20', '2023/05/21', '2023/05/22', '2023/05/23'],
  orders: [120, 130, 101, 130, 90, 230, 210],
  sales: [220, 280, 191, 234, 290, 330, 310]
}

// 图表配置项
const getChartOption = () => {
  return {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0,0,0,0.7)',
      borderWidth: 0,
      padding: [5, 10],
      textStyle: {
        color: '#fff'
      },
      formatter: (params) => {
        const date = params[0].axisValue
        const orders = params[0].data
        const sales = params[1].data
        return `${date}<br/>订单：${orders}<br/>销售额：${sales}`
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '60px', // 为图例留出固定空间
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: chartData.dates,
      axisLine: {
        lineStyle: {
          color: '#E5E5E5'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#999',
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: '#F0F0F0'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#999',
        fontSize: 12
      }
    },
    legend: {
      data: ['订单', '销售额'],
      top: '20px', // 距离顶部的距离
      left: 'center', // 水平居中
      itemGap: 50, // 图例项之间的间距
      textStyle: {
        color: '#333',
        fontSize: 14
      },
      itemWidth: 12, // 图例标记的宽度
      itemHeight: 12, // 图例标记的高度
      icon: 'rect', // 使用矩形作为图例标记
      itemStyle: {
        borderWidth: 0 // 移除图例标记的边框
      }
    },
    series: [
      {
        name: '订单',
        type: 'bar',
        data: chartData.orders,
        barWidth: 15,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#6495ED' },
            { offset: 1, color: '#4169E1' }
          ])
        }
      },
      {
        name: '销售额',
        type: 'bar',
        data: chartData.sales,
        barWidth: 15,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#ff9a9e' },
            { offset: 0.5, color: '#ff7875' },
            { offset: 1, color: '#ff4d4f' }
          ])
        }
      }
    ]
  }
}

// 初始化图表
const initChart = () => {
  if (chart) {
    chart.dispose()
  }
  chart = echarts.init(chartRef.value)
  chart.setOption(getChartOption())
}

// 监听窗口大小变化
const handleResize = () => {
  chart && chart.resize()
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  chart && chart.dispose()
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.statistics-chart {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chart-title {
  margin: 0;
  padding-bottom: 20px;
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.chart-container {
  width: 100%;
  height: 350px;
}
</style>

<style scoped>
.order-statistics {
  display: flex;

  .data-box {
    flex: 1;
    display: flex;
    text-align: center;
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
  }

  img {
    width: 80px;
    margin-left: 20px;
  }

  .small-box {
    width: 100%;

    p {
      width: 100%;
      /* margin: 0; */
    }
  }
}
</style>